<template>
    <div class="w-full h-full">
        <div>
            <video :src="movieData.video"></video>
            <div class="flex justify-between">
                <h1 class="ml-2 text-lg font-bold truncate ">{{movieData.title}}</h1>
                <span class="w-20 ml-4 text-lg" @click="changeOnshow" >简介></span>
            </div>
            <div class="ml-2">
                <span>{{movieData.rate}}分.</span>
                <span v-for="item in movieData.movieTypes">{{item.name}}/</span>
                <span>.{{movieData.duration}}</span>
            </div>

        </div>
        <!-- 简介隐藏页 -->
        <div class="float" v-if="temp">
            <p>{{movieData.title}}</p>
            <p>评分：{{movieData.rate}}</p>
            <p>导演：{{movieData.author}}</p>
            <p>影人：<span v-for="item in movieData.casts">{{item.name}}/</span></p>
            <p>类型：<span v-for="item in movieData.movieTypes">{{item.name}}/</span></p>
            <div v-for="item in movieData.casts" :key="item.id" class="flex flex-wrap w-full">
                <img :src="item.avatar" class="w-1/6" alt="明星">
                <p class="text-center">{{item.name}}</p>
            </div>
            <div>
                <h3 class="text-lg font-bold ">简介</h3>
                <p class="text-sm ">{{movieData.summary}}</p>
            </div>
        </div>
        <div class="w-full mt-3">
            <h3 class="text-lg font-bold ">相关推荐</h3>
            <div class="flex justify-start" v-for="item in relativeMoviesData" :key="item.id" @click="ondetails(item.id)">
                <img :src="item.poster" alt="" class="w-1/4 mt-2">
                <div class="items-end mt-2">
                    <p class="mt-2"> {{item.title}}</p>
                    <p class="mt-2">豆瓣评分:<span class="font-bold text-yellow-400">{{item.rate}}</span></p>
                    <p class="mt-2">类型:<span v-for="types in item.movieTypes" :key="types.id">{{types.name}}/</span></p>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUpdated, reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import API from '../../utils/axios'


export default defineComponent({
    name:"search",
    setup(){
        // 定义是否拿到显示详情
        let onshow = ref(false)
        let temp:boolean = onshow.value
        function changeOnshow():any{
            onshow.value = true
            temp = onshow.value
        }
        const router:any = useRouter()
        // 获取传进来的id
        let movieId:number = reactive(router.currentRoute.value.query.id)
        // 拿到相应的id就去获取详情页
        const movieData:any = ref([])
        const relativeMoviesData:any = ref([])
        const getMovieData = async ()=>{
            let res = await API({
                url:`/api/movie/${movieId}`,
                method:'get'
            })
            movieData.value = res.data.data.movie
            relativeMoviesData.value = res.data.data.relativeMovies
            console.log("拿到数据",res.data.data);
            
        }
        function ondetails(id:number):any{
                movieId = id
                getMovieData()
        }
        // 数据在组件挂载完成拿到
        onMounted(async()=>{
            // 更改ID值后再更新一下数据
            // console.log("拿到ID",movieId)
            await getMovieData()
        })
        return{
            movieId,
            movieData,
            relativeMoviesData,
            ondetails,
            onshow,
            temp,
            changeOnshow
        }
    }
})

</script>